<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- bootstrap -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <script src="/assets/js/bootstrap.min.js"></script>
    <title>文章列表</title>
</head>

<body>
    <div class="container">
        {{ template "header" }}

        <div class="row mt-3">
            {{ range $index, $post := . -}}
            <div class="col-md-6">
                <div
                    class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <!-- <strong class="d-inline-block mb-2 text-primary">{{ $post.Title }}</strong> -->
                        <h3 class="mb-0">{{ $post.Title }}</h3>
                        <!-- <div class="mb-1 text-muted">Nov 12</div> -->
                        <p class="card-text mb-auto">{{ $post.Content }}</p>
                        <a href="/post_detail?pid={{$index}}" class="stretched-link">阅读更多...</a>
                    </div>
                    <div class="col-auto d-none d-lg-block">
                        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
                            role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"
                            focusable="false">
                            <title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef"
                                dy=".3em">文章封面</text>
                        </svg>

                    </div>
                </div>
            </div>
            {{- end }}
        </div>

    </div>
</body>

</html>